<template>
	<div style="display: flex;flex-direction: column;" class="otherPage productsAndServices salesArea">
		<Header :selected="5"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover; ':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="5" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<el-menu mode="horizontal" text-color="#666666">
					<template v-for="item in arrA">
						<el-menu-item :index="item.index">{{item.name}}
						</el-menu-item>
					</template>
				</el-menu>
				<el-row :gutter="60" class="tac">
					<el-col :xs="24" :sm="24" :md="6" :lg="6">
						<el-menu :default-active="secondClassActiveIndex" class="el-menu-vertical-demo">
							<template v-for="item in secondClassifyList">
								<el-menu-item @click="changeSecondCalss(item.id,true)" :index="item.id">
									<span slot="title">{{item.name}}</span>
								</el-menu-item>
							</template>
						</el-menu>
					</el-col>
					<el-col :xs="24" :sm="24" :md="18" :lg="18"  >
						<el-card >
							<el-collapse v-model="activeNames">
								<template v-for="(item ,index) in salesAreaList">
									<el-collapse-item class="header" :title="item.companyName " :name="index">
										<el-row>
											<el-col :xs="24" :sm="24" :md="21" :lg="21">{{item.address}}</el-col>
										</el-row>
										<el-row>
											<el-col :xs="24" :sm="24" :md="21" :lg="21">{{item.mobile}}</el-col>
										</el-row>
										<el-row>
											<el-col :xs="24" :sm="24" :md="21" :lg="21">{{item.tgSalesMobile}}</el-col>
										</el-row>
										<el-row>
											<el-col :xs="24" :sm="24" :md="21" :lg="21">{{item.pgSalesMobile}}</el-col>
										</el-row>
									</el-collapse-item>
								</template>
								<div>
									<el-row :gutter="24" type="flex" class="paginationArea">
										<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
											:layout="isShowJumper?'prev, pager, next,total,jumper ':'prev, next,total' "
											:total="total" :prev-text="$t('previousPage')" :next-text="$t('nextPage')"
											@current-change="handleCurrentChange" />
									</el-row>
								</div>
							</el-collapse>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		productsAndServicesMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				isShowJumper: true,
				loading: true,
				pageSize: 10,
				total: 0,
				currentPage: 1,
				tableData: [],
				isRegistrationForm: false,
				activeIndex: '1',
				activeNames: [0],
				arrA: [{
					name: this.$t('salesOutlets'),
					index: "1"
				}],
				secondClassifyList: [{
					name: this.$t('regionalSalesCompany'),
					id: '1'
				}, {
					name: this.$t('professionalSalesCompany'),
					id: '2'
				}],
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: productsAndServicesMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('productsAndServices'),
						to: '/productsAndServices'
					},
					{
						label: this.$t('salesArea'),
						to: '/salesArea'
					}
				],
				hoverIndex: -1,

				jobClass: "1",

				salesAreaList: [],
				secondClassActiveIndex: null

			};
		},
		computed: {},
		created() {},
		mounted() {
			this.bindBg();
			if (this.secondClassifyList.length > 0) {
				this.bindSalesAreaPage(this.secondClassifyList[0].id);
				this.secondClassActiveIndex = this.secondClassifyList[0].id;
			}
			if (this.$request.checkIsMobile()) {
				this.isShowJumper = false;
			}
		},
		methods: {
			/**
			 * 获取销售区域顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getSalesAreaTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl;
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * 第一级分类-改变
			 * @param {Object} index
			 */
			changeFirstClass(index) {
				this.jobClass = index;
				this.secondClassActiveIndex = this.secondClassifyList[0].id
				this.bindSalesAreaPage(this.secondClassifyList[0].id)
			},
			/**
			 * 第二级分类-改变
			 * @param {Object} id
			 */
			changeSecondCalss(id, isclick) {
				if (isclick) {
					this.currentPage = 1;
				}
				this.isRegistrationForm = false;
				this.jobClassActiveIndex = id
				this.changeSalesAreaList(id);
			},
			changeSalesAreaList(id) {
				this.bindSalesAreaPage(id)
			},
			/**
			 * 右侧列表
			 * @param {Object} id
			 */
			bindSalesAreaPage(id) {
				let params = {
					market: this.jobClass,
					companyType: id,
					pageSize: this.pageSize,
					pageNum: this.currentPage

				};
				this.secondClassActiveIndex = id;
				let that = this;
				this.$request.getSalesAreaPage(params).then(res => {
					if (res && res.data) {
						this.salesAreaList = res.data.records
						this.total = res.data.total;
						// this.currentPage = res.data.pageNum
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			///////获取点击页码，请求接口
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				this.bindSalesAreaPage(this.secondClassActiveIndex);
			},
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/productsAndServices/productsAndServices.css");

	.box-card-registration {
		margin-top: 3vh;
		margin-bottom: 3vh;
		text-align: center;
		height: 50px;
		line-height: 50px;
		background: #F3F3F3;
	}

	.box-card {
		margin-top: 3vh;
	}

	.el-menu-vertical-demo {
		margin-top: 3vh;
		box-shadow: 0px 2px 7px 0px rgba(122, 122, 122, 0.25);
		text-align: center;

	}

	.el-menu-vertical-demo .is-active {
		border-left: 3px solid #0484D7;
	}

	.box-card .el-collapse {
		border: 0px !important;

	}

	.el-collapse-item {
		padding: 20px !important;
	}

	.box-card .el-collapse-item {
		margin: 2vh !important;
	}

	.box-card .is-active {
		box-shadow: 0px 2px 7px 0px rgba(122, 122, 122, 0.25);
	}

	.w-100 {
		width: 100%;
	}

	.info-title {
		font-weight: 400;
		font-size: 16px;
	}

	.salesArea .paginationArea {
		margin-top: 20px;
	}

	.salesArea .el-menu--horizontal>.el-menu-item.is-active {
		border-bottom: 0px;
	}

	.salesArea .el-pagination {
		margin: 0 auto;
	}

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}



	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}
	@media (max-width:768px) {
		.salesArea .el-pagination {
			margin-top: 10px !important;
		}
		.content-cart {
			padding: 0px !important;
		}
		.el-collapse-item{
			padding: 0px !important;
		}
	}
	  
</style>